<template>
  <div class="total">
    <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="评分"
  left-arrow
  @click-left="onClickLeft"
  
/>
 </header>
 <div class="cent">
    
   <ul>
        <span><van-icon name="orders-o" />  订单详情</span>
     <li> <p>客户</p><i>1</i></li>
     <li> <p>商品</p><i>1</i></li>
     <li> <p>数量</p><i>1</i></li>
   </ul>
 </div>
 <div class="cent">
    
   <ul>
        <span><van-icon name="orders-o" />  服务评价</span>
       <li>  <i>描述相符</i> <van-rate 
  v-model="value1"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <i>物流速度</i> <van-rate 
  v-model="value2"
  :size="25"
  color="#fe8e5b"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <i>服务质量</i> <van-rate 
  v-model="value3"
  :size="25"
  color="#ff5f5e"
  void-icon="star"
  void-color="#eee"
/></li>
   </ul>
 </div>
  <van-field v-model="value4"  type="textarea" rows="4" autosize placeholder="请填写评价" />
  <div class="bottom">
   <van-button color="#003399" round @click="comment" >提交评论</van-button>
 </div>
  </div>
</template>

<script>
import {comment} from '../../request/api'
export default {
data(){
    return{
        value1:0,
         value2:0,
          value3:0,
          value4:''
    }
},
methods:{
     onClickLeft() {
      this.$router.go(-1)
    },
    comment(){
      console.log(this.$route.params.id);
        comment({
          serialNo:this.$route.params.id,
          prodConformityPoint:this.value1,
          logisticsSpeedPoint:this.value2,
          serviceQualityPoint:this.value3,
          comment:this.value4
        }).then(res=>{
          console.log(this.$toast('成功提交'));
          console.log(res);
        })
    }
}
}
</script>

<style lang='less'>
*{
    font-size: .18rem!important;
}
.total{
  background-color: #f5f5f5;
}
header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
padding:3% 0 0;
.van-nav-bar__title{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    
}
.cent{
  background: white;
  margin: 0 0 4% 0 ;
  span{
      color: #003399;
      background: #f4fbfe;
      line-height: .45rem;
  }
  ul{
      .van-icon{
          vertical-align: center;
      } 
    margin: 0  4%;
     li{
         
    line-height: .45rem;
    display: flex;
    p{
        width: 25%;
    }
    i{
          width: 25%;
    }
    
  }
  }
 
}
.bottom{
  
  position: absolute;
  width: 100%;
  bottom: .1rem;
  .van-button{
  margin: .1rem .15rem;
  width: 92%;
}
}
</style>